<template>
    <!-- 弹窗 -->
    <view class="dialog">
    <up-popup :show="show" :round="14" mode="center" @close="closepop">
                <view class="popup_box">
                    <!-- 图标 -->
                    <view class="image">
                            <image class="uploadimg"  :src="`${baseUrl}`+ imagesucceedSrc" 
                                mode="scaleToFill"
                                />
                    </view>
                    <!-- 标题文字 -->
                    <view class="popup_title">
                        {{subtitle }}
                    </view>
                    <!-- input 输入框 -->
                    <view class="popup_input">
                        <view class="popup_symbol" v-if="dialogStatus == true">￥</view>
                        <up-input v-model="inputValue"  type="digit" placeholder="请输入"   />
                    </view>
                    <!-- 提示文本 -->
                    <view class="hint_text">
                        <view class="hint_image">
                            <image :src="`${baseUrl}/uploads/uniapp_image/staff/piliangshezhi_icon1@2.png`"
                                mode="scaleToFill" />
                        </view>
                        <view> {{ hint }}</view>
                    </view>
                    <!-- 按钮集合 -->
                    <view class="button_box">
                        <view class="left_button" @tap="closepop">取消</view>
                        <view class="right_button" @tap="affirm">确认</view>
                    </view>
                </view>
            </up-popup>
  </view>
  
  </template>
  
  <script setup>
  import { baseUrl } from '@/sheep/config';
  import {  ref,watch  } from "vue";
  const emits = defineEmits(['cancel','affirm','update:value', 'clear-text']);
  const props = defineProps({
  show: {
      type: Boolean,
      default: false
    },
    imagesucceedSrc:{
      type: String,
      default: ''
    },
    subtitle:{
      type: String,
      default: '提交成功'
    },
    dialogButton:{
      type: String,
      default: '我知道了'
    },
    dialogStatus:{
      type: Boolean,
      default: true
    },
    hint: {
        type: String,
        default: ''
    },
    //区分事工时 金额
    distinction:{
        type: String,
        default: ''
    }
  });
watch(() => props.show,(newVal, oldVal) => {
    if(newVal == true){
        inputValue.value = ''
    }
  
  }
)
   //点击事件
  function closepop(){
  emits('cancel', false)
  return;
  }
  const inputValue = ref()
  function affirm(){
    emits('affirm',inputValue.value,props.distinction)
    return;
  }

  </script>
  
  <style scoped lang="scss">
  /* //弹窗 */
  .dialog{
  // 弹出层
.popup_box {
    width: 600rpx;
    height: 590rpx;
    border-radius: 28rpx;
    background-color: #FFFFFF;
    position: relative;

    // 图标
    .image {
        position: absolute;
        left: 0;
        right: 0;
        top: -100rpx;
        margin: auto;
        width: 256rpx;
        height: 256rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    // 标题文字
    .popup_title {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 40rpx;
        font-style: normal;
        text-decoration: none;
        margin-top: 148rpx;
        margin-bottom: 68rpx;
        text-align: center;
    }

    // 输入框
    .popup_input {
        height: 96rpx;
        display: flex;
        align-items: center;
        border-radius: 28rpx;
        background-color: #F4F6FA;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        margin: 0 40rpx;
        margin-bottom: 12rpx;

        .popup_symbol {
            margin-left: 20rpx;
        }
    }

    // 提示文本
    .hint_text {
        display: flex;
        align-items: center;
        height: 32rpx;
        font-family: PingFangSC;
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
        font-size: 22rpx;
        font-style: normal;
        text-decoration: none;
        margin-bottom: 40rpx;

        .hint_image {
            width: 26rpx;
            height: 26rpx;
            margin-right: 10rpx;
            margin-left: 60rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    // 按钮集合
    .button_box {
        display: flex;

        .left_button {
            width: 50%;
            height: 82rpx;
            text-align: center;
            line-height: 82rpx;
            border-radius: 45rpx;
            border: 4rpx solid $uni-color-primary;
            font-family: PingFangSC;
            color: $uni-color-primary;
            font-weight: $uni-font-weight;
            font-size: 34rpx;
            font-style: normal;
            text-decoration: none;
            margin-left: 40rpx;
            margin-right: 20rpx;
        }

        .right_button {
            width: 50%;
            height: 90rpx;
            text-align: center;
            line-height: 90rpx;
            border-radius: 45rpx;
            background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
            font-family: PingFangSC;
            color: #FFFFFF;
            font-weight: $uni-font-weight;
            font-size: 34rpx;
            font-style: normal;
            text-decoration: none;
            margin-right: 40rpx;
            margin-left: 20rpx;
        }
    }
}
  }
  :deep(.u-popup){
  position: relative;
  .u-icon__icon{background:transparent;}
  }
  .md-modal {
      max-width: 630px;
      min-width: 320px;
      height: auto;
      z-index: 2000;
      // visibility: hidden;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
  }
  /* Effect 8: 3D flip horizontal */
  .md-effect-8.md-modal {
      -webkit-perspective: 1300px;
      -moz-perspective: 1300px;
      perspective: 1300px;
  }
  
  .md-effect-8 .md-content {
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform: rotateY(-70deg);
      -moz-transform: rotateY(-70deg);
      -ms-transform: rotateY(-70deg);
      transform: rotateY(-70deg);
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      opacity: 0;
  }
  
  .md-show.md-effect-8 .md-content {
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
      opacity: 1;
  }
  </style>